<template>
    <div>
        <div class="one">
            <el-form ref="form" :model="form" label-width="80px" v-if="show">
                <el-form-item label="客户类别" class="size">
                    <el-select v-model="store">
                        <el-option v-for="item in region" :key="item.store" :label="item.label" :value="item.store"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户名称" class="size">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item class="item">
                    <el-button type="primary" icon="el-icon-search" @click="getData()">搜索</el-button>

                    <el-button icon="el-icon-refresh-left" @click="Reset()">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="Newexportsearchrefresh">
                <div class="Addexport">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addLists()">新增</el-button>
                    <el-button type="warning" plain icon="el-icon-download" class="yello-button" @click="exports()">导出</el-button>
                </div>
                <div class="Searchrefresh">
                    <el-tooltip placement="top">
                        <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                        <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <el-table :data="tableData"  style="width: 100%">
            <el-table-column label="序号" width="60" type="index" :index="indexMethod"> </el-table-column>
            <el-table-column prop="cNumber" label="客户编码" width="100"> </el-table-column>
            <el-table-column prop="belongName" label="所属仓储客户" width="180"> </el-table-column>
            <el-table-column prop="name" label="销售客户名称" width="180"> </el-table-column>
            <el-table-column prop="shortName" label="简称" width="100"> </el-table-column>
            <el-table-column prop="ename" label="英文名称" width="120"> </el-table-column>
            <el-table-column prop="address" label="联系地址" width="120"> </el-table-column>
            <el-table-column prop="contacts" label="联系人" width="120"> </el-table-column>
            <el-table-column prop="callNumber" label="联系电话" width="120"> </el-table-column>
            <el-table-column prop="fax" label="传真" width="120"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.cId)">修改</el-button>
                    <el-button @click="update(scope.row.cId)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="Del(scope.row.cId)">删除</el-button>
                    <el-button type="text" size="small" @click="Deliverys(scope.row.cId)">地址</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            style="float:right;"
            v-if="paginations.total>paginations.pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginations.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                background
                :page-size="paginations.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paginations.total"
            >
            </el-pagination>
        </div>

        <!-- 修改和添加弹窗 -->
        <div class="dialogVisible">
            <el-dialog :title="Dialogtitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <el-form ref="customer" :model="customer" label-width="80px">
                    <el-form-item label="编号">
                        <el-input v-model="customer.cNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="销售员">
                        <el-input v-model="customer.saller"></el-input>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input v-model="customer.name"></el-input>
                    </el-form-item>
                    <el-form-item label="简称">
                        <el-input v-model="customer.shortName"></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称">
                        <el-input v-model="customer.ename"></el-input>
                    </el-form-item>
                    <el-form-item label="类别">
                        <el-input v-model="customer.category"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="customer.contacts"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="customer.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="customer.callNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="传真">
                        <el-input v-model="customer.fax"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行">
                        <el-input v-model="customer.bank"></el-input>
                    </el-form-item>
                    <el-form-item label="账号">
                        <el-input v-model="customer.account"></el-input>
                    </el-form-item>
                    <el-form-item label="税号">
                        <el-input v-model="customer.tax"></el-input>
                    </el-form-item>
                    <el-form-item label="网址">
                        <el-input v-model="customer.url"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址">
                        <el-input v-model="customer.address"></el-input>
                    </el-form-item>
                    <el-form-item label="客户编码">
                        <el-input v-model="customer.adinp"></el-input>
                    </el-form-item>
                    <el-form-item label="英文地址">
                        <el-input v-model="customer.eaddress"></el-input>
                    </el-form-item>
                    <el-form-item label="国家英文">
                        <el-input v-model="customer.econtry"></el-input>
                    </el-form-item>
                    <el-form-item label="省份英文">
                        <el-input v-model="customer.eprovince"></el-input>
                    </el-form-item>
                    <el-form-item label="备注说明">
                        <el-input v-model="customer.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="归属仓储客户">
                        <el-input v-model="customer.belongName" :disabled="true">
                            <el-button slot="append" @click="dialogTableVisible = true">选择</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="是否仓储客户">
                        <el-checkbox v-model="checked">备选项</el-checkbox>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="conVarSum">确 定</el-button>
                    <el-button @click="dw">取 消</el-button>
                </span>
            </el-dialog>
            <el-dialog class="size" title="归属仓储客户选择" :visible.sync="dialogTableVisible">
                <el-table :data="tableData" class="biop">
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="address" label="地址" width="150"></el-table-column>
                    <el-table-column prop="address" label="联系人" width="130"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                    <el-table-column prop="fax" label="传真" width="130"></el-table-column>
                    <el-table-column prop="callNumber" label="手机" width="130"></el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="Choice(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
            style="float:right;"
            v-if="paginations.total>paginations.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="paginations.pageNum"
                        background
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="paginations.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="paginations.total"
                    >
                    </el-pagination>
                </div>
            </el-dialog>
        </div>

        <el-dialog title="送货地址列表" :visible.sync="Delivery" class="yu">
            <el-button type="primary" icon="el-icon-plus" plain @click="Adde" style="margin-bottom: 10px">新增</el-button>
            <el-button type="warning" icon="el-icon-download" plain>导出</el-button>
            <el-table :data="DtableData">
                <el-table-column prop="isDefault" label="默认" width="120">
                    <template slot-scope="scope">
                        {{ scope.row.isDefault == 0 ? '默认' : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" width="120"></el-table-column>
                <el-table-column prop="contacts" label="联系人" width="120"></el-table-column>
                <el-table-column prop="callNumber" label="电话" width="120"></el-table-column>
                <el-table-column prop="fax" label="传真" width="120"></el-table-column>
                <el-table-column prop="phone" label="手机" width="120"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="Upde(scope.row.aId)">修改</el-button>
                        <el-button type="text" size="small" @click="Deldeli(scope.row.aId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
            style="float:right;"
            v-if="paginations.total>paginations.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paginations.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="paginations.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paginations.total"
                >
                </el-pagination>
            </div>
        </el-dialog>
        <!-- 添加送货地址弹框 -->
        <!-- .dialogVisible /deep/.el-input{ -->
        <div class="Delivery .dialogVisible">
            <el-dialog :title="Dialogtitle" :visible.sync="Delivery2" width="55%" :before-close="handleClose" class="adframe">
                <el-form ref="form" :model="Addes">
                    <el-form-item label="名称">
                        <el-input v-model="Addes.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="Addes.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="Addes.contacts"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="Addes.callNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="传真">
                        <el-input v-model="Addes.fax"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="Addes.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="是否默认">
                        <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" style="margin-left: 10px"></el-switch>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="qx">取消</el-button>
                    <el-button type="primary" @click="Formde">确定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import Icon from './Icon.vue';
export default {
    components: { Icon },
    data() {
        return {
            Dialogtitle: '',
            isDefault: '',
            aId: '',
            value: false,
            Delivery: false,
            Delivery2: false,
            dialogTableVisible: false,
            dialogVisible: false,
            cId: '',
            conVa: 0,
            input: '',
            checked: false,
            conVar: 0,
            // 修改或新增
            customer: {
                account: null,
                address: null,
                bank: null,
                belong: null,
                belongName: null,
                cId: null,
                cNumber: null,
                callNumber: null,
                category: null,
                contacts: null,
                createBy: null,
                createTime: null,
                delFlag: null,
                eaddress: null,
                econtry: null,
                ename: null,
                eprovince: null,
                fax: null,
                name: null,
                number: null,
                params: null,
                phone: null,
                remark: null,
                saller: null,
                searchValue: null,
                shortName: null,
                status: null,
                store: null,
                tax: null,
                updateBy: null,
                updateTime: null,
                url: null
            },
            // 地址添加
            Addes: {
                name: null,
                contacts: null,
                callNumber: null,
                fax: null,
                phone: null
            },
            //客户收货地址的
            DtableData: [],
            // 显示隐藏
            show: true,
            disabled: false,
            dialogVisible: false,
            // 分页
            paginations: {
                // 当前页数
                pageNum: 1,
                // 显示几条
                pageSize: 10
            },
            // 识别码
            store: '',
            // 数据
            tableData: [],
            // 搜索
            form: {
                name: ''
            },
            // 客户类型
            region: [
                {
                    id: '0',
                    label: '全部',
                    store: ''
                },
                {
                    id: '1',
                    label: '仓储客户',
                    store: '1'
                },
                {
                    id: '2',
                    label: '销售客户',
                    store: '0'
                }
            ]
        };
    },
    updated() {
        // console.log(this.store);
    },
    methods: {
        qx() {
            this.Delivery2 = false;
        },
        exports() {
            this.$http.get('http://47.100.8.204:8092/wms/customer/export').then((res) => {
                // console.log(res);
                this.$http
                    .get('http://47.100.8.204:8092/common/download', {
                        fileName: res.msg,
                        delete: true
                    })
                    .then((res) => {
                        console.log(res);
                    });
            });
        },
        Adde() {
            this.resect();
            this.Delivery2 = true;
            this.Dialogtitle = '添加客户送货地址';
            this.conVa = 0;
        }, //修改按钮
        Upde(e) {
            this.aId = e;
            // console.log(e);
            this.Dialogtitle = '修改客户送货地址';
            this.conVa = 1;
            this.$http.get(`http://47.100.8.204:8092/wms/customer/${e}`).then((res) => {
                console.log(res);
                this.adi = res.data.data;
            });
            this.Delivery2 = true;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        // 删除客户
        Del(index) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('http://47.100.8.204:8092/wms/customer/' + index + '').then((res) => {
                        console.log(res);
                        this.getData();
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            // console.log(index.cId);
        },
        // 显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
        // 刷新
        Reset() {
            this.store = '';
            this.form.name = '';
            this.getData();
        },
        // 序号
        indexMethod(index) {
            return (this.paginations.pageNum - 1) * this.paginations.pageSize + index + 1;
        },
        // 数据
        getData() {
            this.$http
                .get('http://47.100.8.204:8092/wms/customer/list', {
                    pageNum: this.paginations.pageNum,
                    pageSize: this.paginations.pageSize,
                    store: this.store,
                    name: this.form.name
                })
                .then((ref) => {
                    console.log(ref);
                    this.tableData = ref.rows;
                    this.paginations.total = ref.total;
                });
        },
        // 分页（多少个）
        handleSizeChange(val) {
            this.paginations.pageSize = Number(val);
            this.getData();
        },
        // 分页（页数）
        handleCurrentChange(val) {
            this.paginations.pageNum = Number(val);
            this.getData();
        },
        addLists() {
            this.resect();
            this.dialogVisible = true;
            this.Dialogtitle = '添加客户信息';
            this.conVar = 0;
        }, //修改按钮
        update(e) {
            // console.log(e);
            this.Dialogtitle = '修改客户信息';
            this.conVar = 1;
            this.$http.get(`http://47.100.8.204:8092/wms/customer/${e}`).then((res) => {
                console.log(res);
                this.customer = res.data;
                this.dialogVisible = true;
            });
        },
        // 地址
        Deliverys(a) {
            console.log(a);
            this.cId = a;
            this.$http
                .get('http://47.100.8.204:8092/wms/address/list', {
                    cId: a,
                    pageSize: this.paginations.pageSize
                })
                .then((res) => {
                    console.log(res);
                    this.DtableData = res.rows;
                });
            this.Delivery = true;
        },
        // 删除
        Deldeli(index) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.aid = index;
                    this.$http.delete(`http://47.100.8.204:8092/wms/address/${index}`).then((res) => {
                        this.Deliverys(this.cId);
                        console.log(res);
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },

        resect() {
            // this.customer.account = null,
            (this.customer.address = null),
                (this.customer.bank = null),
                (this.customer.belong = null),
                (this.customer.belongName = null),
                (this.customer.cId = null),
                (this.customer.cNumber = null),
                (this.customer.callNumber = null),
                (this.customer.category = null),
                (this.customer.contacts = null),
                (this.customer.createBy = null),
                (this.customer.createTime = null),
                (this.customer.delFlag = null),
                (this.customer.eaddress = null),
                (this.customer.econtry = null),
                (this.customer.ename = null),
                (this.customer.eprovince = null),
                (this.customer.fax = null),
                (this.customer.name = null),
                (this.customer.number = null),
                (this.customer.params = null),
                (this.customer.phone = null),
                (this.customer.remark = null),
                (this.customer.saller = null),
                (this.customer.searchValue = null),
                (this.customer.shortName = null),
                (this.customer.status = null),
                (this.customer.store = 0),
                (this.customer.tax = null),
                (this.customer.updateBy = null),
                (this.customer.updateTime = null),
                (this.customer.url = null);
        },
        Deagain() {
            (this.Addes.name = null),
                (this.Addes.contacts = null),
                (this.Addes.callNumber = null),
                (this.Addes.fax = null),
                (this.Addes.phone = null),
                (this.Addes.isDefault = null);
        },
        //弹框提交
        Formde() {
            this.Delivery2 = false;
            if (this.value == false) {
                this.isDefault = 0;
            } else {
                this.isDefault = 1;
            }
            if (this.conVa == 0) {
                // console.log("添加");
                this.$http
                    .post('http://47.100.8.204:8092/wms/address', {
                        ...this.Addes,
                        cId: this.cId,
                        isDefault: this.isDefault
                    })
                    .then((res) => {
                        console.log(res);
                        this.Deliverys(this.cId);
                        this.Deagain();
                        this.$message.success('添加成功');
                    });
            } else {
                console.log(this.aId);
                // this.cdi = res.data;
                this.$http
                    .put('http://47.100.8.204:8092/wms/address', {
                        cId: this.cId,
                        aId: this.aId,
                        ...this.Addes,
                        isDefault: this.isDefault
                    })

                    .then((res) => {
                        console.log(res);
                        this.Deliverys(this.cId);
                        this.Deagain();
                        this.$message.success('修改成功');
                    });
            }
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            if (this.conVar == 0) {
                // console.log("添加");
                this.$http
                    .post('http://47.100.8.204:8092/wms/customer', {
                        ...this.customer
                    })
                    .then((res) => {
                        console.log(res);
                        this.getData();
                        this.resect();
                        this.$message.success('添加成功');
                    });
            } else {
                //  console.log('修改');
                this.$http
                    .put('http://47.100.8.204:8092/wms/customer/', {
                        ...this.customer
                    })
                    .then((res) => {
                        console.log(res);
                        this.getData();
                        this.resect();
                        this.$message.success('修改成功');
                    });
            }
        },
        Choice(index) {
            this.customer.belongName = index.name;
            this.customer.belong = index.cId;
            this.dialogTableVisible = false;
        },
        dw() {
            this.dialogVisible = false;
            this.resect();
        }
    },
    mounted() {
        this.getData();
    }
};
</script>



<style lang="less" scoped >
.size {
    font-weight: 550;
}
.one .el-form-item--small {
    width: 20%;
    display: inline-block;
}
.item /deep/ .el-form-item__content:last-child {
    margin-left: 20px !important;
}
.item /deep/ .el-button {
    height: 30px !important;
}
.Addexport /deep/ .el-button {
    widows: 70px !important;
}
/deep/ .yello-button {
    color: #ffba00;
    background: #fff8e6;
    border-color: #ffe399;
}
.Newexportsearchrefresh {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
/deep/ .el-table th.el-table__cell.is-leaf {
    border: unset !important;
}
/deep/.el-dialog {
    width: 35% !important;
}
.el-dialog__body /deep/.el-form-item--small {
    width: 80% !important;
}
.dialogVisible /deep/label.el-form-item__label {
    font-weight: 600;
    width: 100px !important;
}
.yu /deep/.el-dialog {
    width: 65% !important;
}
.dialogVisible /deep/.el-dialog {
    width: 55% !important;
}
.dialogVisible/deep/.el-input {
    width: 90%;
}
.adframe/deep/.el-input {
    width: 70%;
}
.adframe /deep/label.el-form-item__label {
    font-weight: 600;
    width: 100px !important;
}
// /deep/.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
//     border: unset !important;
// }
// /deep/.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
//     border: unset !important;
// }
/deep/.el-table__cell{
    border-right: unset !important;
}
.block{
    height: 30px;
    margin: 10px 0px;
}
</style>
